<template>
  <div class="health-degree">
    <base-header title="万联城服集团数据分析平台（小区健康度）" :rightIcon=true :leftIcon=true @goReload="goReload"></base-header>
    <div class="health-degree__content">
      <div class="bg m10">
        <div class="back-border h100">
          <div class="health-degree__content-question">
            <img src="~images/question.png" alt="">
            <span>问：如何定义健康的小区？</span>
            <p style="padding-left: 30px">答：1.综合得分要达到85分； 2.六大方面要均衡发展，越接近正六边形，越说明小区健康。</p>
          </div>
        </div>
      </div>
      <div class="bg m10">
        <div class="back-border h100">
          <base-title title="小区健康度"></base-title>
          <div class="health-degree__content-info pt10 pb10">
            <div class="health-degree__select">
              <div class="health-degree__select-zones">
                <el-select v-model="zoneId" size="mini" @change="getData">
                  <el-option
                    v-for="item in zonesList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >
                  </el-option>
                </el-select>
              </div>
              <span class="date">{{date}}</span>
            </div>
            <div class="info-chart">
              <div style="width: 60%">
                <ve-radar :data="chartData" :settings="chartSettings" :extend="chartExtend" :colors="colors" width="100%" height="18rem"></ve-radar>
              </div>
              <div class="score">
                <span class="num" :class="[{red:grade.zhdf < 60 ? true : false}, {orange:grade.zhdf >=60 && grade.zhdf<85 ? true : false}, {green:grade.zhdf >=85 ? true : false}]">
                  <ICountUp
                    :delay="delay"
                    :endVal="grade.zhdf"
                    :decimals="2"
                    :options="options"
                    @ready="onReady"
                  /></span>
                <span>(综合得分)</span>
              </div>
              <div class="score-list">
                <div class="list-item">
                  <span class="item-title">安全指标:</span>
                  <span class="item-num" :class="[{red:grade.aqzb < 60 ? true : false}, {orange:grade.aqzb >=60 && grade.aqzb<85 ? true : false}, {green:grade.aqzb >=85 ? true : false}]">{{grade.aqzb}}</span>
                  <span class="item-unit">分</span>
                </div>
                 <div class="list-item pl20">
                  <span class="item-title">服务指标:</span>
                  <span class="item-num" :class="[{red:grade.fwzb < 60 ? true : false}, {orange:grade.fwzb >=60 && grade.fwzb<85 ? true : false}, {green:grade.fwzb >=85 ? true : false}]">{{grade.fwzb}}</span>
                  <span class="item-unit">分</span>
                </div>
                <div class="list-item">
                  <span class="item-title">经济指标:</span>
                  <span class="item-num" :class="[{red:grade.jjzb < 60 ? true : false}, {orange:grade.jjzb >=60 && grade.jjzb<85 ? true : false}, {green:grade.jjzb >=85 ? true : false}]">{{grade.jjzb}}</span>
                  <span class="item-unit">分</span>
                </div>
                <div class="list-item pl20">
                  <span class="item-title">社区治理:</span>
                  <span class="item-num" :class="[{red:grade.sqzl < 60 ? true : false}, {orange:grade.sqzl >=60 && grade.sqzl<85 ? true : false}, {green:grade.sqzl >=85 ? true : false}]">{{grade.sqzl}}</span>
                  <span class="item-unit">分</span>
                </div>
                <div class="list-item">
                  <span class="item-title">外部评价:</span>
                  <span class="item-num" :class="[{red:grade.wbpj < 60 ? true : false}, {orange:grade.wbpj >=60 && grade.wbpj<85 ? true : false}, {green:grade.wbpj >=85 ? true : false}]">{{grade.wbpj}}</span>
                  <span class="item-unit">分</span>
                </div>
                <div class="list-item pl20">
                  <span class="item-title">突发事件:</span>
                  <span class="item-num" :class="[{red:grade.tfsj < 60 ? true : false}, {orange:grade.tfsj >=60 && grade.tfsj<85 ? true : false}, {green:grade.tfsj >=85 ? true : false}]">{{grade.tfsj}}</span>
                  <span class="item-unit">分</span>
                </div>
              </div>
            </div>
            <div class="index-group pl20 pt10">
              <div class="index-item index-item1">
                <div class="title bg1">
                  <span>安全指标（{{grade.aqzb}}分）</span>
                  <span>权重30%</span>
                </div>
                <div class="border">
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>消防</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.xfaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>设备设施</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.sbssaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>电梯</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.dtaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重20%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>安防</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.afaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>操作</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.czaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>信息</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.xxaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>合同</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.htaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="index-item index-item2">
                <div class="title bg2">
                  <span>服务指标（{{grade.fwzb}}分）</span>
                  <span>权重20%</span>
                </div>
                <div class="border">
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>工作过程</span>
                        <span>安全管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.gzgcaqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重20%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>服务</span>
                        <span>投诉管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.fwtsgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>客户满意度</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.khmyd" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>员工满意度</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.ygmyd" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>认证标准的</span>
                        <span>对标贯标</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.rzbzddbgb" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="index-group pl20 pt20">
              <div class="index-item index-item3">
                <div class="title bg3">
                  <span>经济指标（{{grade.jjzb}}分）</span>
                  <span>权重20%</span>
                </div>
                <div class="border1">
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>收费情况</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.sfqk" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重50%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>支出情况</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.zcqk" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>利润情况</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.lrqk" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重20%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="index-item index-item4">
                <div class="title bg4">
                  <span>社区治理（{{grade.sqzl}}分）</span>
                  <span>权重15%</span>
                </div>
                <div class="border1">
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>社区评价</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.sqpj" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重40%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>客户分类</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.khfl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>舆情管理</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.yqgl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>回访数量</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.hfsl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重10%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>客户转化率</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.khzhl" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="index-group pl20 pt15">
              <div class="index-item index-item4">
                <div class="title bg5">
                  <span>外部评价（{{grade.wbpj}}分）</span>
                  <span>权重10%</span>
                </div>
                <div class="border2">
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>政府奖惩</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.zfjc" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重50%</span>
                    </div>
                    <div class="progress">
                      <span class="tit">
                        <span>业委会评价</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.ywhpj" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重30%</span>
                    </div>
                  </div>
                  <div class="progress-group">
                    <div class="progress">
                      <span class="tit">
                        <span>媒体评价</span>
                      </span>
                      <p><el-progress :text-inside="true" :stroke-width="20" :percentage="grade.mtpj" :color="customColor" :format="format"></el-progress></p>
                      <span class="weight">权重20%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="index-item index-item6">
                <div class="title bg6">
                  <span>突发事件（{{grade.tfsj}}分）</span>
                  <span>权重5%</span>
                </div>
                <div class="border2">
                  <p>无固定细分指标，根据实际情况考核。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseHeader from 'src/components/BaseHeader'
import BaseTitle from 'src/components/BaseTitle'
import ICountUp from 'vue-countup-v2';
import { Select, Option, Progress } from 'element-ui'
import Radar from 'v-charts/lib/radar.common'
import { formatFontSize, getLastMonthCN } from 'js/utils'

export default {
  components: {
    BaseTitle,
    BaseHeader,
    ICountUp,
    [Select.name]: Select,
    [Option.name]: Option,
    [Radar.name]: Radar,
    [Progress.name]: Progress,
  },
  data() {
    this.colors = ['#FFEA00', '#E56F82']
    return {
      date: getLastMonthCN(),
      zonesList: [
        {
          name: '白马尊邸',
          id: 1
        },
        {
          name: '新明半岛',
          id: 2
        },
      ],
      zoneId: 1,
      chartData: {
        columns: ['name', 'fwzb', 'aqzb', 'jjzb', 'wbpj', 'tfsj', 'sqzl'],
        rows: [
          // { 'name': '小区实际健康度', 'fwzb': 81.5, 'wbpj': 60, 'tfsj': 100 , 'sqzl': 67,  'jjzb': 84.06, 'aqzb': 91.5},
          // { 'name': '健康小区标准指数', 'fwzb': 85, 'wbpj': 85, 'tfsj': 85 , 'sqzl': 85,  'jjzb': 85, 'aqzb': 85},
        ]
      },
      chartSettings: {
        labelMap: {
          'fwzb': '服务指标',
          'aqzb': '安全指标',
          'jjzb': '经济指标',
          'wbpj': '外部评价',
          'tfsj': '突发事件',
          'sqzl': '社区治理',
        },
      },
      chartExtend: {
        radar: {
          indicator: [
            {name: '服务指标', max: 100},
            {name: '安全指标', max: 100},
            {name: '经济指标', max: 100},
            {name: '外部评价', max: 100},
            {name: '突发事件', max: 100},
            {name: '社区治理', max: 100},
          ],
          radius: formatFontSize(1),
          center: ['50%', '50%'],
          axisLine: {                         // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
                color: '#6A97AA',                   // 坐标轴线线的颜色。
                width: 1,                      	 // 坐标轴线线宽。
                type: 'solid',                   // 坐标轴线线的类型。
            }
          },
          splitLine: {                        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
                color: '#6A97AA',                       // 分隔线颜色
                width: 1, 							 // 分隔线线宽
            }
          },
          splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {                            // 分隔区域的样式设置。
                color: ['rgba(30,41,71,0.1)', 'rgba(255,255,255,0.1)',],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          startAngle: 60,
        },
        textStyle: {
          color: '#8EC7DC',
          fontSize: formatFontSize(0.12),
        },
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
            lineHeight: formatFontSize(0.15)
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          left: '15%', 
          top: '40%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
        },
        // series: {
        //   areaStyle: {
        //     opacity: 0.3
        //   }
        // }
      },
      customColor: [
        {color: '#FF6666', percentage: 59},
        {color: '#FF9645', percentage: 84},
        {color: '#44D373', percentage: 85},
      ],
      grade: {
        zhdf: 0
      },
      delay: 0,
      options: {
        useEasing: false,
        useGrouping: false,
        decimals: '.',
        separator: ',',
        prefix: '',
        suffix: '',
        decimalPlaces: '2'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onReady: function(instance, CountUp) {
      const that = this;
      instance.update(that.grade.zhdf);
    },
    format(percentage) {
      return percentage
    },
    getData() {
      if (this.zoneId===1) {
        this.chartData.rows = [
          { 'name': '小区实际健康度', 'aqzb': 100, 'fwzb': 81.5, 'sqzl': 67, 'tfsj': 100 , 'wbpj': 60, 'jjzb': 84.06,},
          { 'name': '小区达标健康度', 'fwzb': 85, 'wbpj': 85, 'tfsj': 85 , 'sqzl': 85,  'jjzb': 85, 'aqzb': 85},
        ]
        this.grade = {
          zhdf: 84.16,
          aqzb: 100,
          xfaqgl: 100,
          czaqgl: 100,
          sbssaqgl: 100,
          xxaqgl: 100,
          dtaqgl: 100,
          htaqgl: 100,
          afaqgl: 100,

          fwzb: 81.5,
          gzgcaqgl: 90,
          rzbzddbgb: 80,
          fwtsgl: 65,
          ygmyd: 90,
          khmyd: 70,

          jjzb: 84.06,
          sfqk: 68.11,
          lrqk: 100,
          zcqk: 98,

          sqzl: 67,
          sqpj: 80,
          hfsl: 100,
          khfl: 70,
          khzhl: 40,
          yqgl: 60,

          wbpj: 60,
          zfjc: 60,
          mtpj: 60,
          ywhpj: 60,

          tfsj: 100
        }
      } else if(this.zoneId===2) {
        this.chartData.rows = [
          { 'name': '小区实际健康度', 'fwzb': 75.5, 'wbpj': 66, 'tfsj': 100 , 'sqzl': 54.5,  'jjzb': 100, 'aqzb': 82},
          { 'name': '小区达标健康度', 'fwzb': 85, 'wbpj': 85, 'tfsj': 85 , 'sqzl': 85,  'jjzb': 85, 'aqzb': 85},
        ]
        this.grade = {
          zhdf: 79.48,
          aqzb: 82,
          xfaqgl: 80,
          czaqgl: 100,
          sbssaqgl: 80,
          xxaqgl: 100,
          dtaqgl: 60,
          htaqgl: 100,
          afaqgl: 80,
          fwzb: 75.5,
          gzgcaqgl: 90,
          rzbzddbgb: 80,
          fwtsgl: 65,
          ygmyd: 75,
          khmyd: 75,
          jjzb: 100,
          sfqk: 100,
          lrqk: 100,
          zcqk: 100,
          sqzl: 54.5,
          sqpj: 80,
          hfsl: 80,
          khfl: 40,
          khzhl: 40,
          yqgl: 65,
          wbpj: 66,
          zfjc: 60,
          mtpj: 60,
          ywhpj: 80,
          tfsj: 100
        }
      }
      
    },
    goReload() {
      this.$router.push('/reloadback')
    }
  }
}
</script>
<style lang="scss">
.health-degree {
  width: 100vw;
  &__select {
    position: absolute;
    z-index: 999;
    // text-align: right;
    padding: 5px 0px 5px 20px;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-zones {
      margin-right: 20px;
      .el-select {
        width: 120px;
      }
    }
  }
  &__content {
    &-question {
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:bold;
      color:rgba(255,255,255,1);
      line-height:30px;
      padding: 10px;
      img {
        width: 25px;
        height: 20px;
        vertical-align: middle;
        padding-right: 3px;
      }
    }
    .date {
      font-size:14px;
      font-family:Adobe Heiti Std;
      font-weight:normal;
      color:#fff;
    }
  }
  .info-chart {
    display: flex;
    align-items: center;
    .score {
      background-image: url('~images/scoreback1.gif');
      background-size: 250px 250px;
      background-repeat: no-repeat;
      font-size:12px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 250px;
      .num {
        font-size: 60px;
        font-family:Adobe Heiti Std;
        font-weight:normal;
        padding-bottom: 10px;
      }
    }
    .score-list {
      margin-left: 100px;
      width: 340px;
      height: 131px;
      background:rgba(255,255,255,0.1);
      border-radius:25px;
      padding: 10px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .item-title {
        font-size:14px;
        color: #fff;
        font-weight:bold;
        // line-height:30px;
      }
      .item-num {
        display: inline-block;
        font-size:24px;
        font-weight:bold;
        width: 60px;
        text-align: right;
      }
      .item-unit {
        font-size:14px;
        color: #fff;
        font-weight:bold;
        // line-height:30px;
      }
    }
  }
  .index-group {
    display: flex;
    .index-item {
      width: 50%;
      // border:1px solid rgba(106,151,170,1);
      margin-right: 20px;
      .title {
        font-size:14px;
        height:40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 13px;
      }
      .bg1 {
        background:#0A8CFF;
      }
      .bg2 {
        background:#003fbf;
      }
      .bg3 {
        background:#0e7b92;
      }
      .bg4 {
        background:#0E962A;
      }
      .bg5 {
        background:#77209f;
      }
      .bg6 {
        background:#5C00C3;
      }
    }
    .border {
      border:1px solid rgba(106,151,170,1);
      border-top: 0;
      box-sizing: border-box;
      height: 83%;
    }
    .border1 {
      border:1px solid rgba(106,151,170,1);
      border-top: 0;
      box-sizing: border-box;
      height: 75%;
    }
    .border2 {
      border:1px solid rgba(106,151,170,1);
      border-top: 0;
      box-sizing: border-box;
      height: 67%;
    }
    .index-item1 {
      .progress {
        padding: 3px 0;
      }
    }
    .index-item2 {
      .progress {
        padding: 10px 0;
      }
    }
    .index-item3 {
      .progress {
        padding: 15px 0;
      }
    }
    .index-item4 {
      .progress {
        padding: 5px 0;
      }
    }
    .index-item6 {
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        font-size:12px;
      }
    }
    .progress-group {
      padding: 5px 15px 0px 25px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .progress {
      display: flex;
      align-items: center;
      font-size:12px;
      .el-progress-bar__outer {
        background:rgba(255,255,255,0.2)
      }
      .el-progress-bar__innerText {
        font-size: 14px;
        font-family: Times, "Times New Roman", Georgia, serif;
      }
      .tit {
        display: flex;
        flex-direction: column;
        text-align: right;
        width:60px;
        font-size:12px;
        color: #fff;
        line-height:15px;
      }
      .el-progress {
        display: inline-block;
        width: 300px;
        padding: 0 7px 0 13px;
      }
      .weight {
        color: #8ec7dc;
      }
    }
  }
  .red {
    color: #FF6666;
  }
  .orange {
    color: #FF9645;
  }
  .green {
    color: #44D373;
  }
}
</style>